<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        /* .box{
            background-color: black;
        } */
        .account{
            width:400px;
            border:1px solid #dddddd;
            border-radius:5px;
            box-shadow:5px 5px 30px #aaa;
            margin-left:auto;
            margin-right:auto;
            margin-top:100px;
            padding:20px 40px;
            
        }
        .account h2{
            margin-top:10px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="account">
        <h2>用户登录</h2>
        <form method="post"novalidate>
            {% csrf_token %}
            <div class="form-group">
                <label for="">用户名</label>
                <!-- <input type="text"class="form-control"placeholder="用户名"> -->
                {{form.username}}
                <span style="color:red;">{{form.username.errors.0}}</span>
            </div>
            <div class="form-group">
               <label for="">角色</label>
                {{form.role}}
                <span style="color:red;">{{form.role.errors.0}}</span>
            </div>
            <div class="form-group">
                <label for="">密码</label>
                <!-- <input type="password"class="form-control"placeholder="密码"> -->
                {{form.password}}
                <span style="color:red;">{{form.password.errors.0}}</span>
            </div>
            <div class="form-group">
                <label for="id_code">图片验证码</label>
                <div class="row">
                    <div class="col-xs-7">
                        {{form.code}}
                        <!-- <input type="text"name="code"class="form-control",placeholder="请输入图片验证码",id="id_code"> -->
                        <span style="color: red;">{{ form.code.errors.0 }}</span>
                    </div>
                    <div class="col-xs-5">
                        <img src="/image/code/" id="image_code">
                    </div>
                </div>
            </div>
            <input type="submit" value="登录"class="btn btn-primary">
        </form>
    </div>
    </div>
    
</body>
</html>